<template>
	<view>
		<view class="content">
			<view class="banner-list">
				<u-swiper :list="bannerList" keyName="pictureUrl" height="380rpx" @click="bannerClick"></u-swiper>
				<view class="video-list">
					<view v-for="(item,index) in videoList" class="image-container"
						:style="index!=0?'margin-left:20rpx':''" @click="jumpToUrl(item.jumpUrl)">
						<!-- <img :src="item.pictureUrl" alt="展示图片" /> -->
						<image style="width: 100%; height:100%;border-radius: 12rpx;" mode="aspectFill" @load="onImageLoad" :src="item.pictureUrl"></image>
						<view class="text-overlay">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="writer-content">
			<view class="wirter-title">
				<view class="title-icon"></view>
				<view class="title-text">优秀作者</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view :class="findWriterClass(index)" v-for="(item, index) in writerList" :key="index">
					<view class="writer-avatar"><u-avatar :src="item.avatarUrl" mode="aspectFill"></u-avatar></view>
					<view class="writer-name">{{item.tagName}}</view>
				</view>
			</scroll-view>
		</view>

		<view class="blog-content">
			<view class="blog-title">
				<view class="title-icon"></view>
				<view class="title-text">帖子列表</view>
			</view>
			<view class="blog-value">
				<view class="search-tab">
					<view class="search-tab-item">
						<view class="title">类型:</view>
						<picker style="width: 80%;" @change="change" :value="index" :range="typeList"
							range-key="typeName">
							<view class="tab-value">{{typeList[index].typeName}}<u-icon name="arrow-down"
									size="10"></u-icon></view>
						</picker>
					</view>
					<view class="search-tab-item" style="margin-left: 40rpx;">
						<view class="title">作者:</view>
						<picker style="width: 80%;" @change="changeTag" :value="index2" :range="tagList"
							range-key="tagName">
							<view class="tab-value"><span style="width: 80%;">{{tagList[index2].tagName}}</span><u-icon
									name="arrow-down" size="10"></u-icon></view>
						</picker>
					</view>
				</view>
				<view class="search-tab" style="margin-top: 20rpx;">
					<view class="search-tab-item">
						<view class="title">标题:</view>
						<input placeholder="请输入内容" class="tab-input" style="height: 23px; width: 80%;"
							v-model="params.title"></input>
					</view>
					<view class="search-tab-item" style="margin-left: 40rpx;">
						<view class="search-tab-button">
							<u-button color="#FF2248" shape="circle" size="mini" style="width: 20rpx;" @click="paramsSearch">查询</u-button>
							<u-button shape="circle" size="mini" style="width: 20rpx;"
								@click="resetSearch">清空</u-button>
						</view>
					</view>
				</view>
				<view class="blog-items">
					<view class="blog-item" v-for="item in blogList" @click="jumpToUrl(item.blogJumpUrl)">
						<view class="blog-item-pic">
							<u--image :src="item.blogPic" width="200rpx" height="200rpx" radius="8"
								mode="aspectFit"></u--image>
						</view>
						<view class="blog-item-value">
							<view class="value-title">
								<image v-if="item.top==1" style="width: 28rpx; height: 28rpx;" :src="topLogo"></image>
								{{item.title}}
							</view>
							<view class="value-content"> <u-parse :content="item.blogDesc"></u-parse></view>
							<view class="value-type">
								<view class="value-type-item" v-for="item1 in item.types">{{item1.typeName}}</view>
							</view>
							<view class="value-tag">
								<view class="value-tag-item" v-for="item2 in item.tags">
									{{item2.tagName}}
								</view>
							</view>
							<view class="value-date">
								<u-icon name="calendar" size="20rpx"></u-icon>{{item.blogTime}}
							</view>
						</view>
					</view>
					<view v-if="total>params.pageSize"
						style="display: flex;justify-content: center;align-items: center;"><uni-pagination
							:show-icon="true" :total="total" @change="changePage" /></view>
				</view>
			</view>
		</view>

		<view class="dialog-buttion">
			<u--image :src="dialogLogo" width="90rpx" height="90rpx" @click="dialogClick"></u--image>
		</view>
		<u-popup :show="dialogShow" mode="center" :closeOnClickOverlay="false" round="8rpx">
			<view class="dialog-image-container">
				<!-- <image :src="dialogBackground"></image> -->
				<view class="dialog-content">
					<view class="dialog-title">
						<view class="textValue">Jinnies宣传站</view>
					</view>
					<view class="dialog-value">
						<view class="text-content">
							<text>{{textContent}}</text>
						</view>
						<view class="tagList">
							<view class="tag-item" v-for="item in textTags">
								#{{item}}#
							</view>
						</view>
					</view>
					<view class="dialog-button">
						<view class="dialog-button-close" @click="closeDialog">Jinnies收到！</view>
					</view>
				</view>

			</view>
		</u-popup>

	</view>



</template>

<script>
	import {
		cmsParamsList,
		getBlogDetail,
		cmsBannerIndexList,
		cmsPublicizeIndexList,
		findIsShowWriterList
	} from "@/api/page/blog";
	export default {
		data() {
			return {
				bannerList: [],
				videoList: [],
				writerList: [],
				index: 0,
				index2: 0,
				typeList: [{
					typeId: '',
					typeName: '全部'
				}],
				tagList: [{
					tagId: '',
					tagName: '全部'
				}],
				blogList: [],
				params: {
					pageNum: 1,
					pageSize: 10,
					title: null,
					typeId: null,
					tagId: null,
				},
				dialogLogo: "/static/images/logo/dialogLogo.png",
				topLogo: "/static/images/logo/topLogo.png",
				dialogShow: false,
				textContent: "",
				textTags: [],
				total: 0
			}
		},
		mounted() {
			this.findBannerList()
			this.findShowWriterList()
			this.findBlogList()
			this.getTypeAndTagList()
		},
		methods: {
			findBlogList() {
				uni.showLoading({
					title: "数据加载中"
				})
				cmsParamsList(this.params)
					.then((response) => {
						this.blogList = response.rows;
						this.total = Number(response.total);
					})
					.finally(() => {
						uni.hideLoading();
					});
				const element = document.querySelector(".blog-items");
				element.scrollTop = 0;
			},

			getTypeAndTagList() {
				getBlogDetail('').then((response) => {
					this.typeList = [{
						typeId: '',
						typeName: '全部'
					}]
					this.tagList = [{
						tagId: '',
						tagName: '全部'
					}]
					if (response.types) {
						for (var i = 0; i < response.types.length; i++) {
							this.typeList.push(response.types[i])
						}
					}
					if (response.tags) {
						for (var i = 0; i < response.tags.length; i++) {
							this.tagList.push(response.tags[i])
						}
					}
				});
			},
			findShowWriterList(){
				findIsShowWriterList().then((response)=>{
					this.writerList=response.data
				})
			},
			findBannerList(){
				cmsBannerIndexList().then((response)=>{
					this.bannerList=[...response.data.bannerList]
					this.videoList=[...response.data.videoList]
				})
			},
			changePage(e) {
				this.params.pageNum = e.current
				this.findBlogList()
			},
			scroll: function(e) {
				// console.log(e)
			},
			findWriterClass(index) {
				if (index == 0) {
					return 'scroll-view-item_H writer-background-1';
				} else {
					if ((index + 1) % 2 == 0) {
						return 'scroll-view-item_H margin-left-wirter writer-background-2';
					} else {
						return 'scroll-view-item_H margin-left-wirter writer-background-1';
					}
				}
			},
			change(e) {
				this.index = e.detail.value
				this.params.typeId=this.typeList[this.index].typeId
			},
			changeTag(e) {
				this.index2 = e.detail.value
				this.params.tagId=this.tagList[this.index2].tagId
			},
			dialogClick() {
				this.dialogShow = true
				cmsPublicizeIndexList().then((response)=>{
					console.log(response);
					let value = response.data.mainList[0]
					if(value){
						this.textContent=value.content;
						this.textTags=value.tagList.split(",");
					}
				})
			},
			closeDialog() {
				this.dialogShow = false
				this.textContent=""
				this.textTags=[]
			},
			resetSearch() {
				this.params = {
					pageNum: 1,
					pageSize: 10,
					title: null,
					typeId: null,
					tagId: null,
				}
				this.index=0
				this.index2=0
				this.findBlogList()
			},
			paramsSearch(){
				this.params.pageNum=1
				this.findBlogList()
			},
			bannerClick(index){
				if(this.bannerList[index].jumpUrl){
					window.open(this.bannerList[index].jumpUrl, "_blank");
				}
			},
			jumpToUrl(url){
				if(url){
					window.open(url, "_blank");
				}
			},
			onImageLoad(e){
				// console.log('图片加载完成');
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 750rpx;
		height: 600rpx;
		position: relative;
		background-color: white;
		padding-bottom: 20rpx;
		padding: 0rpx 37.5rpx 20rpx 37.5rpx;
		box-sizing:border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.banner-list {
		width:100%;

		.video-list {
			margin-top: 20rpx;
			width: 100%;
			height: 160rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.image-container {
				position: relative;
				// margin: 0 auto;
				height: 160rpx;
				width: 211rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				// img {
				// 	width: 100%;
				// 	height: 160rpx;
				// 	object-fit: cover;
				// 	/* 保持图片比例并覆盖容器 */
				// 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				// }

				.text-overlay {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 211rpx;
					background-color: rgba(0, 0, 0, 0.5);
					/* 半透明黑色背景 */
					color: white;
					padding: 5rpx;
					font-size: 20rpx;
					box-sizing: border-box;
					border-radius: 0 0 12rpx 12rpx;
					text-align: center;
				}
			}

		}
	}

	.writer-content {
		width: 750rpx;
		position: relative;
		background-color: white;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		margin-top: 8rpx;

		.wirter-title {
			width: 90%;
			height: 60rpx;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: start;
			align-items: center;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 40%;
			height: 180rpx;
			text-align: center;
			border: 2rpx solid #DBDBDB;

			.writer-avatar {
				width: 100%;
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.writer-name {
				width: 100%;
				height: 40%;
				display: flex;
				justify-content: center;
				align-items: start;
				font-family: "PingFang-SC";
				font-size: 21rpx;
			}
		}

		.writer-background-1 {
			background-color: #fdf6f6;
		}

		.writer-background-2 {
			background-color: #f5f9fe;
		}

	}

	.blog-content {
		width: 750rpx;
		position: relative;
		background-color: white;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		margin-top: 8rpx;

		.blog-title {
			width: 90%;
			height: 60rpx;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: start;
			align-items: center;
		}

		.blog-value {
			width: 90%;
			margin-left: auto;
			margin-right: auto;

			.search-tab {
				width: 100%;
				display: flex;
				justify-content: start;
				align-items: center;

				.search-tab-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 50%;
					font-family: "PingFang-SC";
					font-size: 25rpx;

					.title {
						width: 20%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.tab-value {
						padding: 10rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						font-size: 20rpx;
						border-radius: 32px;
						background-color: #f5f5f5;

						span {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.tab-input {
						width: 80%;
						font-size: 20rpx;
						border-radius: 32px;
						background-color: #f5f5f5;
						padding: 10rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.search-tab-button {
						width: 70%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
				}
			}

			.blog-items {
				height: 60vh;
				margin-top: 20rpx;
				width: 100%;
				overflow-y: scroll;
				padding-bottom: 40rpx;

				// border: 1px solid black;
				.blog-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #DBDBDB;
					width: 100%;
					height: 250rpx;
					padding: 20rpx;

					.blog-item-pic {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 30%;
						height: 100%;
					}

					.blog-item-value {
						margin-left: 10rpx;
						width: 70%;
						height: 100%;
						font-family: "PingFang-SC";

						.value-title {
							height: 18%;
							font-size: 25rpx;
							font-weight: bold;
							display: flex;
							align-items: center;
						}

						.value-content {
							margin-top: 2rpx;
							height: 50%;
							font-size: 18rpx;
							color: rgba(0, 0, 0, 0.4)
						}

						.value-type {
							margin-top: 4rpx;
							height: 13%;
							display: flex;
							font-size: 15rpx;
							overflow: hidden;

							.value-type-item {
								padding: 4rpx;
								width: fit-content;
								border: 1px solid #FF2248;
								color: #FF2248;
								border-radius: 2px;
								margin-right: 4rpx;
							}
						}

						.value-tag {
							margin-top: 4rpx;
							height: 13%;
							display: flex;
							font-size: 15rpx;
							overflow: hidden;

							.value-tag-item {
								padding: 3rpx;
								width: fit-content;
								background-color: #f4f4f5;
								border: 1px solid #e9e9eb;
								color: #909399;
								padding: 4rpx;
								border-radius: 2px;
								margin-right: 4rpx;
							}
						}

						.value-date {
							margin-top: 4rpx;
							height: 10%;
							font-size: 15rpx;
							display: flex;
						}
					}
				}
			}
		}
	}

	.title-icon {
		height: 30rpx;
		width: 8rpx;
		background-color: #FF2248;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.title-text {
		margin-left: 10rpx;
		font-size: 12px;
		font-weight: bold;
		font-family: "PingFang-SC";
		color: #FF2248;
	}

	.margin-left-wirter {
		margin-left: 10rpx;
	}

	.dialog-buttion {
		position: fixed;
		display: flex;
		width: 100rpx;
		height: 100rpx;
		top: 70vh;
		right: 3rpx;
		z-index: 10;
	}

	.dialog-image-container {
		height: 60vh;
		width: 75vw;
		background-image: url("@/static/images/dialogBackground.png");
		background-repeat: no-repeat;
		background-size: cover;

		.dialog-content {
			padding: 20rpx;
			height: 100%;

			.dialog-title {
				height: 12%;
				// border: 1px solid black;
				padding-bottom: 10rpx;

				.textValue {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: end;
					font-size: 17px;
					font-weight: 550;
					font-family: "PingFang-SC";
					font-style: normal;
					letter-spacing: 0.5rpx;
					color: #3C3C3C;
				}
			}

			.dialog-value {
				height: 78%;
				// border: 1px solid black;
				overflow-wrap: break-word;
				overflow-y: scroll;
				padding-bottom: 20rpx;

				.text-content {
					padding-left: 40rpx;
					padding-right: 30rpx;
					padding-bottom: 20rpx;
					font-size: 23rpx;
					font-family: "PingFang-SC";
					color: #3C3C3C;
				}

				.tagList {
					padding-left: 40rpx;
					padding-right: 20rpx;

					.tag-item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						height: 30rpx;
						font-size: 22rpx;
						background-color: #FF2248;
						padding: 5rpx 20rpx;
						color: white;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-bottom: 5rpx;
						font-family: "PingFang-SC";
					}

				}
			}

			.dialog-button {
				height: 10%;
				width: 100%;
				// border: 1px solid black;
				display: flex;
				justify-content: center;
				align-items: center;

				.dialog-button-close {
					height: 60rpx;
					width: fit-content;
					background-color: #FF2248;
					color: white;
					border-radius: 78rpx;
					padding: 10rpx 30rpx;
					font-size: 25rpx;
					font-family: "PingFang-SC";
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	// ::v-deep .u-swiper__wrapper__item__wrapper__image{
	// 	div{
	// 		// background-size: contain !important;
	// 		background-color: white !important;
	// 	}
	// }
</style>